<template>
	<scroll-view scroll-y="true" :class="'page wm'+ civilizationId">
		<image class="iwidth" style="height:1500rpx;pointer-events: none;" :src="imgPath+'/static/big/bg3.jpg'" mode="scaleToFill"></image>
		<!-- 左上角标题区域 START -->
		<image v-if="civilizationId==1" class="wmtit" :src="imgPath+'/static/big/wm1t.png'" mode="widthFix"></image>
		<image v-if="civilizationId==2" class="wmtit" :src="imgPath+'/static/big/wm2t.png'" mode="widthFix"></image>
		<image v-if="civilizationId==3" class="wmtit" :src="imgPath+'/static/big/wm3t.png'" mode="widthFix"></image>
		<image v-if="civilizationId==4" class="wmtit" :src="imgPath+'/static/big/wm4t.png'" mode="widthFix"></image>
		<!-- 左上角标题区域 END -->
		<!-- 进度条 START -->
		
		<image v-if="civilization.status==2" class="wmbar" :src="imgPath+'/static/big/wm'+civilizationId+'f.png'" mode="widthFix"></image>
		<view v-else v-show="!ruleBool&&!ruleBool2&&!authorBool&&!publishBool&&!updateBool&&!lightBool&&!firstBool&&!joinBool&&!videoBool" :class="{wmcircle:true,hidden:ruleBool||ruleBool2||authorBool||publishBool||updateBool||lightBool||firstBool||joinBool||videoBool}">
			<!-- <image class="wout" src="/static/img/wcle.png" mode="scaleToFill"></image> -->
			<u-circle-progress class="ucircle" :active-color="civilizationColor" :percent="civilization.progress" width="196" border-width="24" inactive-color="#ffffff" bg-color="transparent">
				   <view class="wmtxt">
					   <u-count-to :start-val="0" :end-val="parseInt(civilization.progress)||0"></u-count-to>%
					</view>
			</u-circle-progress>
		</view>
		
		<!-- 进度条 END -->
		<view class="map_view">
			<image class="iwidth" style="height:620rpx;" :src="imgPath+'/static/big/vbg.jpg'" mode="scaleToFill"></image>
			<view :class="'mwrap wm'+civilizationId">
				<image class="iwidth wmimg" :src="imgPath+'/static/big/wm'+civilizationId+'d.png'" mode="widthFix"></image>
				<image class="iwidth wmimg wlinght" v-if="civilization.status==2" :src="imgPath+'/static/big/wm'+civilizationId+'.png'" mode="widthFix"></image>
			</view>
			<image class="iwidth wmtiny" :src="imgPath+'/static/big/wm'+civilizationId+'i.png'" mode="scaleToFill"></image>
			<YunCeng></YunCeng>
		</view>
		<!-- DV 图标 START -->
		<view class="dvwrap breath" v-if="civilization.status==2" @click="showVideo">
			<image class="iwidth" :src="imgPath+'/static/big/dv'+civilizationId+'.png'" mode="widthFix"></image>
			<image class="dvt" src="/static/img/dvt.png" mode="widthFix"></image>
		</view>
		<!-- DV 图标 END -->
		<!-- 规则图标 START -->
		<image class="rule_btn" @click="showPopUp('ruleBool2')" src="/static/img/btn_1.png" mode="widthFix"></image>
		<!-- 规则图标 END -->
		<!-- 邀请小伙伴图标 START -->
		<view  class="invite_btn breath" v-if="authorStep">
			<image class="iwidth" src="/static/img/btn_4.png" mode="widthFix"></image>
			<button class="abs full" style="opacity: 0;" open-type="share"></button>
		</view>
		<!-- 邀请小伙伴图标 END -->
		<!-- 返回上一页 START -->
		<image class="back_btn" @click="backBtn" src="/static/img/btn_7.png" mode="widthFix"></image>
		<!-- 返回上一页 END -->
		<!-- TOP3 START -->
		<view class="toplist">
			<view v-for="(item,index) in top3List" :key="index" class="titem">
				<image class="iwidth" src="/static/img/ico_1.png" mode="widthFix"></image>
				<u-avatar size="64" :src="item.avatar"></u-avatar>
				<view class="far ellipsis"><text>{{item.mileage}}</text>KM</view>
				<view class="nick ellipsis">{{item.nickname}}</view>
			</view>
		</view>
		<!-- TOP3 END -->
		<!-- 弹幕 START -->
		<view class="dmwrap">
			<LBarrage v-if="dmBool" ref="lBarrage" @end="startBarrage"></LBarrage>
		</view>
		<!-- 弹幕 END -->
		<!-- 底部区域 已加入 START -->
		<view class="dbwrap join" v-if="authorStep">
			<image class="abs full" src="/static/img/v_1.png" mode="widthFix"></image>
			<view class="far1"><text>{{userData.mileageTotal}}</text>KM</view>
			<view class="far2"><text>{{userData.mileageToday}}</text>KM</view>
		</view>
		<!-- 底部区域 已加入 END -->
		
		<!-- 底部区域 未加入 START -->
		<view class="dbwrap njoin" v-else>
			<image @click="ruleBtn()" class="ubtn breath" src="/static/img/btn_5.png" mode="widthFix"></image>
			<image class="ubtn" src="/static/img/btn_6.png" mode="widthFix"></image>
			<button class="share" open-type="share"></button>
		</view>
		<!-- 底部区域 未加入 END -->
		
		<!-- 弹窗区域 START -->
		<!-- <cover-view class="coverWrap" v-show="ruleBool||ruleBool2||authorBool||publishBool||updateBool||lightBool||firstBool||joinBool||videoBool"> -->
			<!-- 玩法规则 START -->
			<u-popup v-model="ruleBool" mode="center" :mask-close-able="false">
				<view class="pwrap pwrap1">
					<image class="iwidth" :src="imgPath+'/static/big/wrule2.png'" mode="widthFix"></image>
					<view class="pbtns">
						<view class="pbtn" @click="ruleBool=false"></view>
						<view class="pbtn" @click="joinBtn()"></view>
					</view>
				</view>
			</u-popup>
			<!-- 玩法规则 END -->
			<!-- 文明简介弹窗  START-->
			<u-popup v-model="ruleBool2" mode="center" :mask-close-able="false">
				<view class="pwrap">
					<image class="iwidth" :src="imgPath+'/static/big/wrule.png'" mode="widthFix"></image>
					<image @click="ruleBool2=false" class="close_btn" src="/static/close.png" mode="widthFix"></image>
				</view>
			</u-popup>
			<!-- 文明简介弹窗  END-->
			<!-- 完成授权通知 START -->
			<u-popup v-model="authorBool" mode="center" :mask-close-able="false">
				<view class="pwrap pwrap2">
					<image class="iwidth" :src="imgPath+'/static/big/author.png'" mode="widthFix"></image>
					<view class="pbtns">
						<view class="pbtn" @click="subscribeBtn()"></view>
					</view>
				</view>
			</u-popup>
			<!-- 完成授权通知 END -->
			<!-- 授权成功是否公开弹窗 START -->
			<u-popup v-model="publishBool" mode="center" :mask-close-able="false">
				<view class="pwrap pwrap3">
					<image class="iwidth" :src="imgPath+'/static/big/author2.png'" mode="widthFix"></image>
					<view class="pbtns">
						<view class="pbtn" @click="publishBtn(false)"></view>
						<view class="pbtn" @click="publishBtn(true)"></view>
					</view>
				</view>
			</u-popup>
			<!-- 授权成功是否公开弹窗 END -->
			<!-- 最新里程更新成功弹窗  START-->
			<u-popup v-model="updateBool" mode="center" :mask-close-able="false">
				<view class="pwrap pwrap2">
					<image class="iwidth" :src="imgPath+'/static/big/upSucc.png'" mode="widthFix"></image>
					<image @click="closePopUp('updateBool')" class="close_btn" src="/static/close.png" mode="widthFix"></image>
				</view>
			</u-popup>
			<!-- 最新里程更新成功弹窗  END-->
			<!-- 版图点亮成功弹窗  START-->
			<u-popup v-model="lightBool" mode="center" :mask-close-able="false">
				<view class="pwrap pwrap2">
					<image class="iwidth" :src="imgPath+'/static/big/lightSucc.png'" mode="widthFix"></image>
					<view class="pbtns">
						<view class="pbtn" @click="lightSuccBtn()"></view>
					</view>
				</view>
			</u-popup>
			<!-- 版图点亮成功弹窗  END-->
			<!-- 第一个被点亮成功弹窗  START-->
			<u-popup v-model="firstBool" mode="center" :mask-close-able="false">
				<view class="pwrap pwrap2">
					<image class="iwidth" :src="imgPath+'/static/big/firstSucc.png'" mode="widthFix"></image>
					<view class="ptit">
						<text>{{userPrize.prizeName}}</text>
					</view>
					<view class="pbtns">
						<view class="pbtn" @click="closeFisrt()"></view>
					</view>
				</view>
			</u-popup>
			<!-- 第一个被点亮成功弹窗  END-->
			<!-- 加入成功弹窗  START-->
			<u-popup v-model="joinBool" mode="center" :mask-close-able="false">
				<view class="pwrap pwrap2">
					<image class="iwidth" :src="imgPath+'/static/big/joinSucc.png'" mode="widthFix"></image>
					<view class="pbtns">
						<view class="pbtn" @click="closePopUp('joinBool')"></view>
					</view>
				</view>
			</u-popup>
			<!-- 加入成功弹窗  END-->
			<!-- 视频弹窗  START-->
			<u-popup v-model="videoBool" mode="center" :mask-close-able="false">
				<view class="pwrap pwrap4">
					<view class="vwrap">
						<!-- <image class="abs full pimg" src="/static/img/v_bg.png" mode="scaleToFill"></image> -->
						<video object-fit="contain" class="dvideo" id="descVideo" :src="civilization.videoUrl"  :poster="civilization.videoCover" controls @ended="closeVideo"></video>
					</view>
					<image @click="closeVideo" class="close_btn" src="/static/close.png" mode="widthFix"></image>
				</view>
			</u-popup>
			<!-- 视频弹窗  END-->
		<!-- </cover-view> -->
		
		<!-- 弹窗区域 END -->
		<view v-if="showWhite" class="abs full" style="background-color: #fff;"></view>
		<BgMusic ref="bgMusic"/>
		<ActivityEnd ref="activityEnd"/>
	</scroll-view>
</template>

<script>
	import YunCeng from '@/components/yun-ceng.vue'
	import LBarrage from '@/components/l-barrage.vue'
	import utils from '@/src/utils.js';
	import http from '@/src/http';
	import user from '@/src/data/user'
	import platform from '@/src/platform';
	import publicData from '@/src/data/publicData';
	let isJoin = uni.getStorageSync('isjoin')||false;
	export default {
		options: { styleIsolation: 'shared' },
		components:{
			YunCeng,
			LBarrage
		},
		data() {
			return {
				from:'',
				showWhite:false,
				ruleBool:false,//玩法规则弹窗
				ruleBool2:false,
				authorBool:false,//完成授权通知
				publishBool:false,//授权成功是否公开弹窗
				updateBool:false,//今日里程更新成功
				lightBool:false,//当前版图点亮成功弹窗
				videoBool:false,//版图视频播放弹窗
				videoSrc:'',
				firstBool:false,//第一个被点亮弹窗
				joinBool:false,//参与弹窗
				isWinner:false,
				/*********************************************/
				civilizationId:0,
				civilizationColor:'',
				civilization:{},
				dmBool:false,
				top3List:[],
				userData:{},
				userPrize:{},
				authorStep:isJoin
			}
		},
		 onLoad(options){
			this.from = options.from;
			if(this.from=='main'){
				this.showWhite = true;
				setTimeout(()=>{
					this.showWhite = false;
				},500);
			}
			wx.setStorageSync('haswm',true);
            wx.bgMusic.play();
			/******************************/
			//this.getWeixinStep();
			wx.ppt = this;
		},
		async onShow() {
			this.dmBool = false;
			this.authorStep = uni.getStorageSync('isjoin')||false;
			this.walkData = await platform.getWalkData(true);
			
			let time = wx.getStorageSync('updatetime');
			if(user.stage==3){
               this.$refs.activityEnd.show();
			}
			if(!time){
				this.getWeixinStep(); 
			}else{
				this.getCivilitionData();
			}
			
		},
		onHide() {
			this.dmBool = false;
		},
		methods: {
			getCivilitionData(){
				let that = this;
				http.civilization().then(res=>{
					this.civilization = res.data.civilization;
					this.civilizationId = this.civilization.id;
					/*******************************************/
					if(this.civilizationId==1){
						this.civilizationColor = '#f0980d'
					}else if(this.civilizationId==2){
						this.civilizationColor = '#6fc650'
					}else if(this.civilizationId==3){
						this.civilizationColor = '#369eff'
					}else if(this.civilizationId==4){
						this.civilizationColor = '#ff5847'
					}
					/*******************************************/
					that.getDanList();
					/*******************************************/
					this.top3List = res.data.top3;
					this.userData = res.data.userData;
					this.shareTitle = '我正在参与LightSpeed Walk点亮光子'+this.civilization.title+'版图，快来一起walk吧！';
					this.shareImage = this.imgPath + '/static/big/wm'+this.civilizationId+'.jpg';
				});
			},
			getWeixinStep(){
				let that = this;
				let isJoin = uni.getStorageSync('isjoin')||false;
				wx.getSetting({
					success: function(res) {
						if (!res.authSetting['scope.werun']) {
							that.authorStep = false;
							let refuse = wx.getStorageSync('refuse');
							if(refuse){
								wx.showToast({
									icon: "none",
									title: '请打开设置->微信运动步数',
								});
							}
							that.getCivilitionData();
						} else {
							wx.getWeRunData({
								success: function({encryptedData,iv}) {
									that.authorStep = true;
									http.submitSteps({encryptedData,iv}).then(res2=>{
										that.getCivilitionData();
										if(res2.status!=0){
											return false;
										}
										let time = utils.getDate();
										that.walkUser = res2.data.walkUser;
										that.civilization = res2.data.civilization;
										that.userMileage = res2.data.userMileage;
										that.isWinner = res2.data.isWinner;
										uni.setStorageSync('isjoin',true);
										if(res2.data.first){
											that.joinBool = true;
										}
										if(that.civilization.status==2){
											if(that.walkData.dvStatus==0){
												that.lightBool = true;
											}
										}
										if(res2.data.update){
											//let time2 = wx.getStorageSync('updatetime');
											//if(time!=time2){
												that.updateBool = true;
											//}
										}
										wx.setStorageSync('updatetime',time);
										//that.shareTitle = '';
										//that.shareImage = this.imgPath + '/static/big/share.jpg';
									})
								},
								fail: function(res) {
									console.info('获取微信运动数据失败！！！')
									that.authorStep = false;
								}
							})
						}
					}
				})

			},
			
			showPopUp(popVal){
				this[popVal] = true;
			},
			closePopUp(popVal){
				this[popVal] = false;
			},
			//当前版图点亮成功
			lightSuccBtn(){
				this.lightBool = false;
				this.showVideo();
				http.updateDV();
			},
			showVideo(){
				this.videoBool = true;
				this.$refs.bgMusic.stop();
			},
			
			closeVideo(){
				this.videoBool = false;
				this.$refs.bgMusic.play();
				if(this.walkData&&this.isWinner&&this.walkData.dvStatus==0){
					http.userPrize().then(res=>{
						this.firstBool = true;
						//this.walkData.isWinner = false;
						this.userPrize = res.data.userPrize;
					})
					this.walkData.dvStatus = 1;
				}
				
			},
			closeFisrt(){
				this.firstBool = false;
			},
			backBtn(){
				let pages = getCurrentPages();
				if(pages.length==1){
					uni.redirectTo({
						url:'/pages/activeA/main/main'
					});
				}else{
					let page = pages[pages.length-2];
					if(page.route.includes('activeA/main')){
						uni.navigateBack();
					}else{
						uni.redirectTo({
							url:'/pages/activeA/main/main'
						});
					}
				}
			},
			getDanList(){
				this.dmBool = false;
				this.$nextTick(()=>{
					http.dmlist({civilizationId:this.civilizationId}).then(res=>{
						this.startBarrage(res.data);
					});
				})
			},
			startBarrage(dmList){
				this.dmBool = true; 
				this.$nextTick(()=>{
					this.$refs.lBarrage.start(dmList);
				})
			},
			
			//订阅完成通知
			subscribeBtn(){
				let that = this;
				that.authorBool = false;
				let walkTmplId = that.walkData.config.walkTmplId;
				wx.requestSubscribeMessage({
					tmplIds: [walkTmplId],
					success(res) {
						if(res[walkTmplId]=='accept'){
							that.walkData.isSubscribe = true;
							http.subscribe({type:'walkSuccess'}).then(res2=>{
								if(!that.authorStep){
									that.ruleBool = true;
								}
								uni.showToast({
									title:res2.message
								});
							});
						}else{
							wx.showModal({
							  title: '提示',
							  content: '订阅失败，可在小程序设置中开启该消息订阅通知',
							  success (res) {
							      that.authorBool = false;
							      if(!that.authorStep){
							      	that.ruleBool = true;
							      }
							  }
							})
						}	
					},
					fail(res) {
						if(!that.authorStep){
							that.ruleBool = true;
						}
						platform.toast(res.errMsg);
					}
				})
			},
			//公开数据
			publishBtn(publish=false){
				this.publishBool = false;
			},
			ruleBtn(){
				let that = this;
				if(user.stage==3){
                    this.$refs.activityEnd.show();
					return false;
				}
				if(!that.walkData.isSubscribe&&that.civilization.status!=2){
					that.authorBool = true;
				}else{
					this.ruleBool = true;
				}
			},
			//贡献我的里程
			joinBtn(){
				let that = this;
				that.ruleBool = false;
				let refuse = wx.getStorageSync('refuse');
				if(refuse){
					wx.openSetting();
					return false;
				}
				wx.authorize({
					scope: "scope.werun", // scope表示权限范围，你要申请什么权限
					success(res) {
						that.getWeixinStep();
						wx.removeStorageSync('refuse');
					},
					fail(res) {
						
						wx.showToast({
							icon: "none",
							title: '获取失败',
						});
						wx.setStorageSync('refuse',true)
					},
				});
				//贡献成功
			},
			
		},
		onShareAppMessage() {
			http.writeLog({type:2});
			return {
				title:this.shareTitle,
				imageUrl:this.shareImage,
				path:'/pages/index?name=activeA'
			}
		},
		onShareTimeline() {
			http.writeLog({type:2});
			return {
				title:this.shareTitle,
				imageUrl:this.shareImage,
				path:'/pages/index?name=activeA'
			}
		}
	}
</script>

<style lang="scss" scoped>
@keyframes fadeOut{
  0%{opacity:1}
  90%{
	 opacity:1;
	 display: block; 
  }
  100%{
	opacity:0;
	display: none;
  }
}
.coverWrap{
	position: fixed;
	left:0;
	top:0;
	width:100vw;
	height:100vh;
	z-index:2;
	background-color:rgba(0,0,0,0.6);
}
.wmtit{
	position: absolute;
	width:460rpx;
	left:24rpx;
	top:50rpx;
}
.wmbar{
	position: absolute;
	width:216rpx;
	right:14rpx;
	top:19rpx;
}
.map_view{
	position: absolute;
	pointer-events: none;
	width: 715rpx;
	left:19rpx;
	top:22%;
	padding-top:20rpx;
	border:2rpx solid #000;
	.wmtiny{
		position: absolute;
		width:57rpx;
		height:66rpx;
		right:1%;
		top:2%;
	}
}
.wmcircle{
	position: absolute;
	top:3.2%;right:4.6%;
	width:196rpx;
	height:196rpx;
	.wout{
		position: absolute;
		width:177rpx;
		height: 179rpx;
		top:9rpx;
		left:9rpx;
	}
	.wmtxt{
		color:#fff;
		font-weight: bold;
		font-size: 40rpx;
		/deep/ .u-count-num{
			color:#fff!important;
			font-size: 40rpx!important;
			font-weight: bold!important;
		}
	}
	&.hidden .ucircle{
		animation:fadeOut 0.25s both;
	}
}
@keyframes fadeIn{
  0%{opacity:0;}
  100%{opacity:1;}
}
.mwrap{
	position: absolute;
	&.wm1{
		top:10%;
		left:2%;
		width:96%;
	}
	&.wm2{
		top:4%;
		left:2%;
		width:80%;
	}
	&.wm3{
		top:7%;
		left:8%;
		width:90%;
	}
	&.wm4{
		top:4%;
		left:17%;
		width:71%;
	}
	.wmimg{
		position: absolute;
		width:100%;
		left:0;
		top:0;
		&.wlinght{
			opacity: 0;
			animation: fadeIn 1.5s 1s linear both;
		}
	}
	
}
.dvwrap{
	position: absolute;
	width:171rpx;
	left:46rpx;
	top:788rpx;
	.dvt{
		position: absolute;
		width:97rpx;
		left:37rpx;
		top:77%;
	}
}
.rule_btn{
	position: absolute;
	right: 8rpx;
	width:82rpx;
	top:56%;
}
.invite_btn{
	position: absolute;
	right: 0;
	width:269rpx;
	top:63%;
	transform-origin: 100% 50%;
}
.back_btn{
	position: absolute;
	left: 0;
	width:109rpx;
	top:68.5%;
}
.toplist{
	position: absolute;
	width:628rpx;
	height:118rpx;
	left:122rpx;
	top:1038rpx;
	display: flex;
	justify-content: space-around;
	align-items: center;
	.titem{
		position: relative;
		width:190rpx;
		/deep/ .u-avatar{
			position: absolute;
			left:4rpx;
			top:6rpx;
		}
		.far{
			position: absolute;
			left:70rpx;
			width:117rpx;
			top:4rpx;
			color:#000;
			font-size: 20rpx;
			text-align: center;
			text{
				font-size: 28rpx;
				color:#369eff;
				margin-right:5rpx;
			}
		}
		.nick{
			position: absolute;
			left:70rpx;
			width:117rpx;
			bottom:2%;
			color:#000;
			font-size: 20rpx;
			text-align: center;
		}
	}
}
.dmwrap{
	position: absolute;
	width: 750rpx;
	left:0;
	bottom:134rpx;
	height: 211rpx;
}
.dbwrap{
	position: fixed;
	width: 750rpx;
	left:0;
	bottom:0;
	height: 137rpx;
	z-index: 9;
	&.njoin{
		background-color: #ff5847;
		display: flex;
		justify-content: space-around;
		align-items: center;
		.ubtn{
			position: relative;
			width:290rpx;
		}
		.share{
			position: absolute;
			opacity:0;
			z-index: 2;
			width:50%;
			top:0;right:0;
			height: 100%;
		}
	}
	.far1{
		position: absolute;
		left:248rpx;
		width:257rpx;
		bottom:20%;
		color:#000;
		font-size: 38rpx;
		text-align: center;
		text{
			font-size: 58rpx;
			color:#369eff;
			margin-right:5rpx;
		}
	}
	.far2{
		position: absolute;
		right:0rpx;
		width:252rpx;
		bottom:47%;
		color:#000;
		font-size: 30rpx;
		text-align: center;
		text{
			font-size: 50rpx;
			color:#369eff;
			margin-right:5rpx;
		}
	}
}
.pwrap{
	position: relative;
	width:600rpx;
	z-index:999;
	&.pwrap2{
		width:490rpx;
	}
	.close_btn{
		width:100rpx;
		display:block;
		margin:20rpx auto 0;
	}
	.ptit{
		position: absolute;
		width:80%;left:10%;
		top:45%;
		text-align: center;
		text{
			display: inline-block;
			padding:10rpx 15rpx;
			border-radius: 30rpx;
			font-size: 30rpx;
			font-weight: 600;
		}
	}
	.pimage{
		position: absolute;
		left:25%;
		top:35%;
		width:244rpx;
		height: 284rpx;
		display: block;
		border-radius: 20rpx;
	}
	.pbtns{
		position: absolute;
		width: 100%;
		left:0;
		bottom:0;
		height:76rpx;
		display: flex;
		justify-content: center;
		.pbtn{
			position: relative;
			width: 50%;
			height: 100%;
		}
	}
	&.pwrap3 .pbtns{
		bottom:76rpx;
		height:96rpx;
	}
	&.pwrap4{
		width:750rpx;
		.vwrap{
			position: relative;
			height: 433rpx;
			padding-top:0rpx;
		}
		.dvideo{
			position: relative;
			display: block;
			width: 750rpx;
			margin:0 auto 0;
			height:433rpx;
		}
	}
}
</style>
